<template>
    <div class="func-option">
        <!-- 应用级别的单选 -->
        <template v-if="curType.isRadio">
            <el-radio-group v-model="formData[funcOption.moduleKey]"
                class="func-list-radio">
                <el-radio v-for="subItem in funcOption.moduleRuleList"
                    @change="changeRadio(funcOption.moduleRuleList, subItem)"
                    :key="subItem.ruleKey"
                    :label="subItem.ruleKey"
                    :title="subItem.ruleName"
                    :disabled="subItem.enable === 0"
                    >{{subItem.ruleName}}</el-radio>
            </el-radio-group>
        </template>
        <!-- 应用级别的多选 -->
        <template v-else>
            <el-checkbox v-for="subItem in funcOption.moduleRuleList"
                @change="changeCheckBox(subItem)"
                :checked="subItem.checked"
                :key="subItem.ruleKey"
                :label="subItem.ruleKey"
                :title="subItem.ruleName"
                :disabled="subItem.enable === 0"
                >{{subItem.ruleName}}</el-checkbox>
        </template>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits, computed } from 'vue'

const emit = defineEmits(['change-item']);

const props = defineProps({
    detail: {
        type: Object,
        default: () => {
            return {}
        }
    }
});

const funcOption = computed({
    get: () => props.detail,
    set: (val) => {
        return val
    }
})


// 获取当前类型
const curType = computed(() => {
    let isCheckBox = props.detail.moduleRuleCheckType === 'checkbox';
    let isRadio = props.detail.moduleRuleCheckType === 'radio';
    return {
        isCheckBox,
        isRadio
    }
})


const formData = ref({});


// 单选
function changeRadio (list, subItem) {
    list.length && list.forEach(item => {
         item.checked = false;
    })
    subItem.checked = true;
    funcOption.value.moduleRuleList = list;
    emit('change-item', funcOption.value);
}

// 多选
function changeCheckBox (subItem) {
    subItem.checked = !subItem.checked;
    emit('change-item', funcOption.value);
}


onMounted(() => {
    formData.value = {};
    let moduleRuleList = props.detail.moduleRuleList || [];
    moduleRuleList.length && moduleRuleList.forEach(item => {
        if(item.checked){
            formData.value[props.detail.moduleKey] = item.ruleKey;
        }
    })
 })


</script>

<style lang="scss" scoped>
.func-list-radio {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    .el-radio{
        margin-right: 30px;
        box-sizing: border-box;
    }
    .el-checkbox {
        margin-right: 30px;
        box-sizing: border-box;
    }
    :deep(.el-radio__label), :deep(.el-checkbox__label) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>